<template>
    <view class="primary">
        <text class="text-2xl font-medium price-text">{{ price }}</text>
        <text class="unit-text">{{ desc }}</text>
        <text v-if="scribingPrice" class="text-xs line-through ml-2 text-muted"
            >{{ scribingPrice }}元</text
        >
    </view>
</template>

<script setup lang="ts">
import { ref, withDefaults } from 'vue'

/** Props Start **/
const props = withDefaults(
    defineProps<{
        price?: string // 价格
        desc?: string // 介绍
        scribingPrice?: string // 划线价
    }>(),
    {
        price: '',
        desc: '',
        scribingPrice: ''
    }
)
/** Props End **/

/** Methods Start **/

/** Methods End **/
</script>

<style lang="scss" scoped>
.price-text {
    width: 56rpx;
    height: 22rpx;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 28rpx;
    color: #FF2505;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.unit-text {
    width: 46rpx;
    height: 21rpx;

    margin-left: 10rpx;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 400;
    font-size: 20rpx;
    color: #303133;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>
